<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:p="http://primefaces.org/ui"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
    <h:head> 
        <title>Cronograma </title>
        <link rel='stylesheet' href='../resources/css/fullcalendar.css'/>
        <script src='../resources/js/jquery.min.js'></script>
        <script src='../resources/js/moment.min.js'></script>
        <script src='../resources/css/fullcalendar.js'></script>
        
        <script>
            $(document).ready(function () {

                // page is now ready, initialize the calendar...

                $('#calendar').fullCalendar({
                    // put your options and callbacks here

                    events: #{cronogramaBean.fechasCronogramas}

                });
            });

        </script>

    </h:head>
    <h:body>
        <ui:composition template="TemplatePrincipal.xhtml">
            <ui:define name="content">
                <h:form rendered="#{usuarioBean.tipoUsuario == 'alumno'}">   
                    <p:commandButton value="ATRÁS" action="indexAlumno" ajax="false"/>
                    <p:commandButton value="PROYECTO" action="ProyectoCrearEditar" ajax="false"/>
                    <p:commandButton value="CRONOGRAMA" action="CronogramaLista" ajax="false"/>
                </h:form>
                <h:form rendered="#{usuarioBean.tipoUsuario == 'asesor'}">
                    <p:commandButton value="ATRÁS" action="indexAsesor" ajax="false"/>
                    <p:commandButton value="PROYECTO" action="CronogramaListaAsesor" actionListener="#{proyectoBean.prepararAnteproyecto}" ajax="false"/>
                </h:form>
                
                <f:view>
                    <h:form>
                                  

                        <h3 style="margin-top: 0">Actividades</h3>
                        <!--<p:schedule value="# {cronogramaBean.eventModel}" widgetVar="myschedule" locale="es">

                            <p:ajax event="dateSelect" listener="# {cronogramaBean.onDateSelect}" update="eventDetails" oncomplete="PF('eventDialog').show();" />
                            <p:ajax event="eventSelect" listener="# {cronogramaBean.onEventSelect}" update="eventDetails" oncomplete="PF('eventDialog').show();" />
                            <p:ajax event="eventMove" listener="# {scheduleView.onEventMove}" update="messages" />
                            <p:ajax event="eventResize" listener="# {scheduleView.onEventResize}" update="messages" />

                        </p:schedule>-->
                        <h:panelGrid columnClasses="value">
                            <p:schedule id="schedule" value="#{cronogramaBean.eventModel}" widgetVar="myschedule" timeZone="GMT-6" view="month" style="width: 100%">

                                <p:ajax event="dateSelect" listener="#{cronogramaBean.onDateSelect}" update="eventDetails" oncomplete="PF('eventDialog').show();" />
                                <p:ajax event="eventSelect" listener="#{cronogramaBean.onEventSelect}" update="eventDetails" oncomplete="PF('eventDialog').show();" />


                            </p:schedule>
                        </h:panelGrid>

                        <p:dialog widgetVar="eventDialog" header="Evento de Detalles" showEffect="clip" hideEffect="clip">
                            <h:panelGrid id="eventDetails" columns="2">
                                <h:outputLabel value="ACTIVIDAD:" />
                                <p:inputText id="title" value="#{cronogramaBean.cronograma.actividad}" required="true"/>

                                <h:outputLabel value="DÍA DE INICIO:" />
                                <p:inputMask id="from" value="#{cronogramaBean.dateFI}" mask="99/99/9999">
                                    <f:convertDateTime pattern="dd/MM/yyyy" timeZone="GMT-6"/>
                                </p:inputMask>

                                <h:outputLabel value="DÍA DE TERMINACIÓN:" />
                                <p:calendar id="to" value="#{cronogramaBean.dateDE}" pattern="dd-MM-yyyy" mask="true" required="true" requiredMessage="The FechaInicial field is required."/>
                                <p:commandButton type="reset" value="Reset" ajax="false"/>
                                <p:commandButton id="addButton" value="Save" actionListener="#{scheduleView.addEvent}" oncomplete="PF('myschedule').update();PF('eventDialog').hide();" ajax="false"/>
                            </h:panelGrid>
                        </p:dialog>    

                    </h:form>

                    <script>
                        PrimeFaces.locales['es'] = {
                            closeText: 'Cerrar',
                            prevText: 'Anterior',
                            nextText: 'Siguiente',
                            monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
                            monthNamesShort: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
                            dayNames: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
                            dayNamesShort: ['Dom', 'Lun', 'Mar', 'Mie', 'Jue', 'Vie', 'Sab'],
                            dayNamesMin: ['D', 'L', 'M', 'X', 'J', 'V', 'S'],
                            weekHeader: 'Semana',
                            firstDay: 1,
                            isRTL: false,
                            showMonthAfterYear: false,
                            yearSuffix: '',
                            timeOnlyTitle: 'Sólo hora',
                            timeText: 'Tiempo',
                            hourText: 'Hora',
                            minuteText: 'Minuto',
                            secondText: 'Segundo',
                            currentText: 'Fecha actual',
                            ampm: false,
                            month: 'Mes',
                            week: 'Semana',
                            day: 'Día',
                            allDayText: 'Todo el día'
                        };

                    </script>

                    <style type="text/css">
                        .value {
                            width: 1000px;
                        }
                    </style>
                    <!--<center>
                        <p:scrollPanel mode="native" style="width:800px;height:600px">
                            <div id='calendar'></div>
                        </p:scrollPanel>
                    </center>-->

                </f:view>
            </ui:define>
        </ui:composition>
    </h:body>
</html>

